<template>
	<div>
		<h2 ref="titleRef">我是标题</h2>
		<button ref="buttonRef">我是按钮</button>

		<!-- 获取组件实例 -->
		<show-info ref="showInfoRef"></show-info>
		<button @click="getEl">获取元素</button>
	</div>
</template>

<script>
import { ref, onMounted } from 'vue'
import ShowInfo from './ShowInfo.vue'

export default {
	components: {
		ShowInfo,
	},
	setup(props, ctx) {
		const titleRef = ref()
		const buttonRef = ref()
		const showInfoRef = ref()

		onMounted(() => {
			console.log(titleRef.value)
			console.log(buttonRef.value)
		})

		function getEl() {
			console.log(titleRef.value)
			console.log(buttonRef.value)
			console.log(showInfoRef.value)
			showInfoRef.value.foo()
		}

		return {
			titleRef,
			buttonRef,
			showInfoRef,
			getEl,
		}
	},
}
</script>

<style scoped></style>
